<template>
  <el-dialog
    class="common-dialog"
    :title="title"
    :modal="true"
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    :width="dialogWidth"
    top="0"
    :close-on-click-modal="closeOnClickModal"
    :destroy-on-close="destroyOnClose"
    v-el-drag-dialog="draggable"
    v-bind="$attrs"
    v-on="$listeners"
    @close="handleClose"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer" v-if="!noFooter">
      <template v-if="btnCfg">
        <el-button
          style="min-width: 18%"
          v-for="btn in btnCfg"
          :key="btn.name"
          :type="btn.type"
          @click="$emit(btn.event, btn.params)"
          >{{ btn.name }}</el-button
        >
      </template>
      <template v-else>
        <template v-if="type === 'detail'">
          <el-button type="primary" @click="handleClose" style="width: 18%"
            >关 闭</el-button
          >
        </template>
        <template v-else>
          <el-button type="primary" @click="handleConfirm" style="width: 18%"
            >确 认</el-button
          >
          <el-button @click="handleCancel" style="width: 20%">取 消</el-button>
        </template>
      </template>
    </span>
    <span slot="footer" class="dialog-footer" v-else>
      <slot name="footer"></slot>
    </span>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
export default {
  name: 'TableRowDetailDialog',
  props: {
    dialogTitle: {
      type: String,
      default: '',
    },
    dialogWidth: {
      type: String,
      default: '40%',
    },
    draggable: {
      type: Boolean,
      default: false,
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
    noFooter: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
  },
  directives: { elDragDialog },
  data() {
    return {
      type: 'detail',
      dialogVisible: false,
      btnCfg: null,
    };
  },
  computed: {
    title() {
      if (this.dialogTitle) {
        return this.dialogTitle;
      } else {
        switch (this.type) {
          case 'detail':
            return '详情';
          case 'add':
            return '新增';
          case 'edit':
            return '编辑';
        }
      }
    },
  },
  created() {},
  methods: {
    show(action = 'detail', btnCfg) {
      this.type = action;
      this.btnCfg = btnCfg;
      this.dialogVisible = true;
    },
    handleClose() {
      this.$emit('close');
      this.hide();
    },
    handleConfirm() {
      this.$emit('confirm');
    },
    handleCancel() {
      this.$emit('cancel');
      this.hide();
    },
    hide() {
      this.dialogVisible = false;
      this.$emit('hide');
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
